<template>
  <div class="maptools-container">
    <div class="map-tools">
      <div
        class="map-tool"
        v-for="(item, index) in mapTools"
        :key="index"
        @click="item.event(index)"
        :class="{ 'map-tool-active': item.isActive }"
      >
        <i :class="item.icon"></i>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
    <div class="loadapp" @click="isShowLoadApp = true">
      <i class="iconfont icon-shouji"></i>
      <div class="text">下载APP</div>
    </div>
    <div
      @click="isShowPersonalCenter = !isShowPersonalCenter"
      class="personal-center"
    ></div>
  </div>
  <!-- 加载手机端APP -->
  <div v-show="isShowLoadApp" class="loadapp-event">
    <div class="text1">移动端</div>
    <div class="loadapp-img"></div>
    <div class="text2">扫码下载 高德地图</div>
    <div class="text3">高德地图 哪儿都熟</div>
    <div class="delect" @click="isShowLoadApp = false">x</div>
  </div>
  <!-- 个人中心 -->
  <div v-show="isShowPersonalCenter" class="personal-center-event">
    <div class="personal-header">
      <div class="personal-header-img"></div>
      <div class="personal-header-text">羊驼嘿嘿</div>
      <i class="iconfont icon-bianji"></i>
    </div>
    <div class="personal-main">
      <div class="main-my-shoucang">
        <i class="iconfont icon-wenjianjia"></i>
        <div class="main-text">我的收藏</div>
      </div>
      <div class="main-show-shoucang">
        <i class="iconfont icon-shoucangxiao"></i>
        <div class="main-text">收藏点显示与图面</div>
        <i class="iconfont icon-dui main-right"></i>
      </div>
      <div class="main-change-theme">
        <div class="theme-header">
          <i class="iconfont icon-zhuti_tiaosepan"></i>
          <div class="main-text">主题</div>
          <div class="main-right">室内地图仅适用于标准模式</div>
        </div>
        <div class="theme-list">
          <div v-for="item in themeList" @click="changeTheme(item)">
            <div class="theme-img">
              <img
                :src="item.img"
                alt=""
                :class="item.isChange ? 'theme-img-check' : ''"
              />
              <div :class="item.isChange ? 'check-background' : ''">
                <i class="iconfont icon-duihao" v-show="item.isChange"></i>
              </div>
            </div>
            <div
              class="theme-text"
              :class="item.isChange ? 'theme-text-check' : ''"
            >
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
      <div class="main-sign-out">
        <i class="iconfont icon-tuichudengluicon"></i>
        <div class="main-text">退出登录</div>
      </div>
    </div>
  </div>
  <!-- 卫星路网切换 -->
  <div
    class="satellite-road-event"
    :class="showSatelliteRoad ? 'show-animation' : ''"
  >
    <i
      class="iconfont icon-dui"
      :class="isshowSatelliteRoad ? 'icon-show' : ''"
      @click="showRoad"
    ></i>
    <div class="text" @click="showRoad">路网</div>
  </div>
  <!-- 交通路况切换 -->
  <div v-show="isShowTrafficLayert" class="traffic-event">
    <div class="traffic-header">
      <div class="change-button">
        <div
          :class="trafficShishiChange ? 'change-button-active' : ''"
          @click="trafficShishiChange = true"
        >
          实时
        </div>
        <div
          :class="!trafficShishiChange ? 'change-button-active' : ''"
          @click="trafficShishiChange = false"
        >
          预测
        </div>
      </div>
      <div class="traffic-tuli">
        <div class="traffic-tuli-text">畅通</div>
        <div class="traffic-tuli-1"></div>
        <div class="traffic-tuli-2"></div>
        <div class="traffic-tuli-3"></div>
        <div class="traffic-tuli-4"></div>
        <div class="traffic-tuli-text">拥堵</div>
      </div>
    </div>
    <div class="traffic-time">
      <div class="traffic-time-text">更新时间：</div>
      <div class="traffic-time-day">
        <span> {{ trafficLayerChangeTime.dayTime }} </span>
        <span> {{ trafficLayerChangeTime.hourTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'

const props = defineProps({
  mapInstance: {
    type: Object,
    required: true,
  },
  receivecityName: {
    type: String,
    default: '广州',
  },
})
const map = ref(null)
const AMap = ref(null)

//右上角工具方法
let showSatellite = ref(null)
let showAir = ref(null)
let showTraffic = ref(null)
let showDistance = ref(null)
let showSubway = ref(null)
let showFullScreen = ref(null)

//css状态弹窗
const isShowLoadApp = ref(false)
const isShowPersonalCenter = ref(false)
const showSatelliteRoad = ref(false)
const isshowSatelliteRoad = ref(true)
const isShowTrafficLayert = ref(false)

//定义图层
const satellite = ref(null) //卫星地图
const roadNet = ref(null) //卫星地图路网

//城市名称  空气质量
const cityName = ref('')
const airQuality = ref([])
const localStorageAirQuality = ref(null)
const renderAirQuality = ref([])
const isShowAirQuality = ref(false)
const airQualityMarkers = ref([]) //存储空气质量标记

// 交通图层
const trafficShishiChange = ref(true) //切换实时预测
const trafficLayer = ref(null) //交通路况图层
const trafficLayerChangeTime = ref({}) //交通路况图层切换时间

//测距
const mouseTool = ref(null) //数据工具实例

const mapTools = ref([
  {
    text: '卫星',
    icon: 'iconfont icon-weixing',
    event: showSatellite,
    isActive: false,
  },
  {
    text: '空气',
    icon: 'iconfont icon-kongqizhiliangyuceyujing',
    event: showAir,
    isActive: false,
  },
  {
    text: '路况',
    icon: 'iconfont icon-lukuang',
    event: showTraffic,
    isActive: false,
  },
  {
    text: '测距',
    icon: 'iconfont icon-ceju_1',
    event: showDistance,
    isActive: false,
  },
  {
    text: '地铁',
    icon: 'iconfont icon-xianwangfenbu',
    event: showSubway,
    isActive: false,
  },
  {
    text: '全屏',
    icon: 'iconfont icon-quanping2',
    event: showFullScreen,
    isActive: false,
  },
])
const themeList = ref([
  {
    img: './gaodeLOGO.png',
    text: '标准',
    isChange: true,
    mapStyle: 'amap://styles/normal',
  },
  {
    img: './gaodeLOGO.png',
    text: '马卡龙',
    isChange: false,
    mapStyle: 'amap://styles/graffiti',
  },
  {
    img: './gaodeLOGO.png',
    text: '魅夜黑',
    isChange: false,
    mapStyle: 'amap://styles/dark',
  },
])

//卫星地图切换
showSatellite.value = (index) => {
  mapTools.value[index].isActive = !mapTools.value[index].isActive

  showSatelliteRoad.value = !showSatelliteRoad.value
  if (showSatelliteRoad.value) {
    map.value.add([satellite.value, roadNet.value])
    isshowSatelliteRoad.value = true
  } else {
    map.value.remove([satellite.value, roadNet.value])
    isshowSatelliteRoad.value = false
  }
}

//空气质量请求的方法
showAir.value = (index) => {
  mapTools.value[index].isActive = !mapTools.value[index].isActive
  //=============考虑到接口请求次数的先设置，将结果储存在localstorage中===========
  const apiUrl = '/air/environment/air/cityair' // 接口请求URL
  const apiKey = '190ff6ea3a38cb5c91a263059c6f2cfc'
  // 接口请求入参配置
  const requestParams = {
    key: apiKey,
    city: cityName.value,
  }
  axios.get(apiUrl, { params: requestParams }).then((res) => {
    // 解析响应结果
    if (res.status === 200) {
      //
      //console.log(res.data)

      localStorage.setItem('airQuality', JSON.stringify(res.data))
      //将结果赋值给airQuality
      airQuality.value = res.data
    }
  })

  //从localstorage中获取空气质量数据
  localStorageAirQuality.value = JSON.parse(localStorage.getItem('airQuality'))

  //遍历对象 获取空气质量数据
  airQuality.value = Object.values(
    localStorageAirQuality.value.result[0].lastMoniData
  )
  //console.log('airQuality', airQuality.value) //{city: '白云嘉禾', AQI: '34', America_AQI: 'null', quality: '优', PM2.5Hour: '15', …}

  //根据city中的地址，确定地图中对应的经纬度，将空气质量呈现在地图上，
  //===========删除原因，两个数组长度不等，元素的属性不统一，renderAirQuality缺少关键数据 ，换另一种方法======
  //   airQuality.value.forEach((item) => {
  //     const geocoder = new AMap.value.Geocoder({
  //       city: cityName.value,
  //     })
  //     const address = item.city

  //     geocoder.getLocation(address, function (result, status) {
  //       const lnglat = [
  //         status.geocodes[0].location.lng,
  //         status.geocodes[0].location.lat,
  //       ]
  //       const DiquName = status.geocodes[0].formattedAddress
  //       renderAirQuality.value.push({
  //         lnglat,
  //         DiquName,
  //       })
  //     })
  //   })
  //   console.log('renderAirQuality', renderAirQuality.value)

  //////////
  // 当点击事件再次触发的时候，切换显示状态
  isShowAirQuality.value = !isShowAirQuality.value

  if (!isShowAirQuality.value) {
    // 清空地图标记的完整逻辑
    clearAirQualityMarkers()
    return
  }

  // 先清空之前的标记
  clearAirQualityMarkers()

  // 从localstorage中获取空气质量数据
  localStorageAirQuality.value = JSON.parse(localStorage.getItem('airQuality'))

  // 遍历对象获取空气质量数据
  airQuality.value = Object.values(
    localStorageAirQuality.value.result[0].lastMoniData
  )

  //==========根据airQuality中已经有的经纬度坐标直接渲染在地图上======
  for (let i = 0; i < airQuality.value.length; i++) {
    if (!airQuality.value[i].lat || !airQuality.value[i].lon) {
      // 缺少经纬度数据 跳过循环
      continue
    } else {
      renderAirQuality.value.push({
        lnglat: [airQuality.value[i].lon, airQuality.value[i].lat],
        DiquName: airQuality.value[i].city,
        AQI: airQuality.value[i].AQI,
        quality: airQuality.value[i].quality,
      })
    }
  }

  // 渲染空气质量标记
  renderAirQuality.value.forEach((item) => {
    const marker = createAirQualityMarker(item)
    airQualityMarkers.value.push(marker)
  })
}

//显示实时交通路况
showTraffic.value = (index) => {
  mapTools.value[index].isActive = !mapTools.value[index].isActive
  isShowTrafficLayert.value = !isShowTrafficLayert.value
  if (isShowTrafficLayert.value) {
    map.value.add(trafficLayer.value)
    getCurrentTime()
  } else {
    map.value.remove(trafficLayer.value)
  }
}

//测距功能
showDistance.value = (index) => {
  mapTools.value[index].isActive = !mapTools.value[index].isActive

  //先清除之前的测距工具
  mouseTool.value.close()
  mouseTool.value.rule({
    startMarkerOptions: {
      //设置量测起始点标记属性对象 可缺省
      icon: new AMap.value.Icon({
        size: new AMap.value.Size(20, 20), //图标大小
        imageSize: new AMap.value.Size(15, 15),
        image: './yuanquan-1.png',
      }),
      offset: new AMap.value.Pixel(-10, -10),
    },
    endMarkerOptions: {
      //设置量测结束点标记属性对象 可缺省
      icon: new AMap.value.Icon({
        size: new AMap.value.Size(20, 20), //图标大小
        imageSize: new AMap.value.Size(15, 15),
        image: './yuanquan-1.png',
      }),
      offset: new AMap.value.Pixel(-10, -10),
    },
    midMarkerOptions: {
      //设置拖拽路线插件途经点点标记属性对象 可缺省
      icon: new AMap.value.Icon({
        size: new AMap.value.Size(20, 20), //图标大小
        imageSize: new AMap.value.Size(15, 15),
        image: './yuanquan-1.png',
      }),
      offset: new AMap.value.Pixel(-10, -10),
    },
    lineOptions: {
      //可缺省
      strokeStyle: 'solid',
      strokeColor: '#fd1f03',
      strokeOpacity: 1,
      strokeWeight: 3,
      zIndex: 50,
    },
  })
}

//地铁功能
showSubway.value = () => {
  alert('地铁功能暂未开通')
}

//全屏切换
showFullScreen.value = (index) => {
  mapTools.value[index].isActive = !mapTools.value[index].isActive
  const mapContainer = document.getElementById('container') // 地图容器ID

  if (!document.fullscreenElement) {
    // 进入全屏
    mapContainer.requestFullscreen().catch((err) => {
      console.error(`全屏请求失败: ${err.message}`)
    })
  } else {
    // 退出全屏
    document.exitFullscreen()
  }
}

//切换样式
const changeTheme = (item) => {
  if (item.isChange) {
    return
  }
  themeList.value.forEach((item) => {
    item.isChange = false
  })

  item.isChange = true
  map.value.setMapStyle(item.mapStyle)
}
//路网切换
const showRoad = () => {
  isshowSatelliteRoad.value = !isshowSatelliteRoad.value
  //移除路网
  if (isshowSatelliteRoad.value) {
    map.value.add(roadNet.value)
  } else {
    map.value.remove(roadNet.value)
  }
}

// 创建空气质量标记的专用函数
const createAirQualityMarker = (item) => {
  const content = `
    <div class="airquality-event">
      <div class="adress">${item.DiquName}</div>
      <div class="AQI">${item.AQI}</div>
    </div>
  `

  const marker = new AMap.value.Marker({
    content: content,
    position: item.lnglat,
  })

  map.value.add(marker)

  // 给标记添加点击事件
  marker.on('click', function () {
    const infoWindow = createAirQualityInfoWindow(item)
    infoWindow.open(map.value, item.lnglat)

    // 给弹出框添加关闭事件
    const delect = document.querySelector('.airmarker-popver-event-delect')
    if (delect) {
      delect.addEventListener('click', function () {
        infoWindow.close()
      })
    }
  })

  return marker
}
// 创建空气质量信息窗口的专用函数
const createAirQualityInfoWindow = (item) => {
  const content = `
    <div class="airmarker-popver-event">
      <div class="airmarker-popver-header">
        <div>${item.DiquName}</div>
        <div class="airmarker-popver-header-level">${item.quality}</div>
      </div>
      <div class="airmarker-popver-body">
        <div class="airmarker-popver-body-AQI">
          <div>AQI(空气质量指数)</div>
          <div class="airmarker-popver-header-level">${item.AQI}</div>
        </div>
        <div class="airmarker-popver-body-lnglat">
          <div>当前经纬度坐标</div>
          <div>${item.lnglat[0]},${item.lnglat[1]}</div>
        </div>
      </div>
    </div>
    <div class="airmarker-popver-event-delect">X</div>
  `

  return new AMap.value.InfoWindow({
    anchor: 'top',
    content: content,
    isCustom: true, // 使用自定义窗体
    offset: new AMap.value.Pixel(-105, -140),
  })
}
// 清空空气质量标记的专用函数
const clearAirQualityMarkers = () => {
  // 移除所有标记的事件监听
  airQualityMarkers.value.forEach((marker) => {
    marker && marker.off('click') // 移除点击事件
    map.value && map.value.remove(marker) // 从地图移除
  })

  // 关闭所有InfoWindow
  map.value && map.value.clearInfoWindow()

  // 清空数组
  renderAirQuality.value = []
  airQualityMarkers.value = []
}

//获得当前时间
const getCurrentTime = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  return (trafficLayerChangeTime.value = {
    dayTime: `${year}/${month}/${day}`,
    hourTime: `${hour}:${minute < 10 ? '0' + minute : minute}`,
  })
}

watch(
  () => props.mapInstance,
  (newVal) => {
    if (newVal && newVal.map && newVal.AMap) {
      map.value = newVal.map
      AMap.value = newVal.AMap

      //创建卫星图图层和路网图层
      satellite.value = new AMap.value.TileLayer.Satellite()
      roadNet.value = new AMap.value.TileLayer.RoadNet()

      //创建实时交通图层
      trafficLayer.value = new AMap.value.TileLayer.Traffic({
        autoRefresh: true, //是否自动刷新
        interval: 180, //刷新间隔，默认180s
      })

      //创建鼠标工具插件实例
      // mouseTool.value = new AMap.value.MouseTool(map.value)

      //异步加载插件
      AMap.value.plugin('AMap.MouseTool', function () {
        mouseTool.value = new AMap.value.MouseTool(map.value)
      })
    }
  },
  { immediate: true } // 立即执行一次
)
watch(
  () => props.receivecityName,
  (newVal) => {
    cityName.value = newVal
  },
  { immediate: true } // 立即执行一次
)
</script>

<style lang="scss" scoped>
@import 'https://at.alicdn.com/t/c/font_4946857_jx8vh2h7rko.css?spm=a313x.manage_type_myprojects.i1.9.41ec3a81WdKUGA&file=font_4946857_jx8vh2h7rko.css';


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.maptools-container {
  display: flex;
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 200;
  .map-tools {
    display: flex;
    align-items: center;
    color: #6d6d6d;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
    .map-tool {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 65px;
      height: 45px;
      background-color: #fff;
      transition: 0.2s background linear;
      &:hover {
        cursor: pointer;
        background-color: #ebebeb;
      }
      .iconfont {
        font-size: 16px;
        margin-right: 5px;
      }
      .text {
        font-size: 12px;
      }
    }
    .map-tool-active {
      color: #008ff3;
    }
  }
  .loadapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 91.79px;
    height: 45px;
    background-color: #fff;
    margin-left: 20px;
    color: #6d6d6d;
    border-radius: 3px;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
    &:hover {
      cursor: pointer;
      background-color: #ebebeb;
    }
    .iconfont {
      font-size: 16px;
      margin-right: 5px;
    }
    .text {
      font-size: 12px;
    }
  }
  .personal-center {
    width: 46px;
    height: 46px;
    background-image: url('./touxiang.png');
    background-position: center;
    background-size: cover;
    border: 2px solid #bababa;
    border-radius: 50%;
    margin-left: 20px;
    cursor: pointer;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  }
}
.loadapp-event {
  position: fixed;
  top: 75px;
  right: 80px;
  width: 266px;
  height: 203px;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  z-index: 100;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  .text1 {
    font-size: 18px;
    color: #008ff3;
  }
  .loadapp-img {
    width: 70px;
    height: 70px;
    background-image: url('./loadapp.png');
    background-position: center;
    background-size: cover;
    margin: 15px auto;
  }
  .text2 {
    font-size: 14px;
    color: #000;
    margin: 15px 0 1px;
  }
  .text3 {
    font-size: 12px;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
  }
  .delect {
    position: absolute;
    top: 1px;
    right: 5px;
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}
.personal-center-event {
  box-sizing: border-box;
  position: fixed;
  top: 75px;
  right: 20px;
  width: 260px;
  height: 310px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 100;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  .personal-header {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 10px;
    background-color: #008ff3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    .personal-header-img {
      width: 34px;
      height: 34px;
      background-image: url('./touxiang.png');
      background-position: center;
      background-size: cover;
      border: 2px solid #bababa;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
    }
    .personal-header-text {
      margin: 0 14px;
      width: 134px;
      vertical-align: top;
      color: white;
    }
    .iconfont {
      color: white;
      cursor: pointer;
    }
  }
  .personal-main {
    padding: 0 20px;
    .main-my-shoucang,
    .main-show-shoucang,
    .main-sign-out {
      display: flex;
      align-items: center;
      height: 34px;
      .iconfont {
        color: #7c8295;
        font-size: 13px;
        &:hover {
          color: #008ff3;
          cursor: pointer;
        }
      }

      .main-text {
        color: #7c8295;
        font-size: 13px;
        margin: 0 14px;
        &:hover {
          color: #008ff3;
          cursor: pointer;
        }
      }
      .main-right {
        display: inline-block;
        color: #b6b7b9;
        text-align: right;
        margin-left: 50px;
      }
    }
    .main-change-theme {
      .theme-header {
        display: flex;
        align-items: center;
        height: 34px;

        .iconfont {
          color: #7c8295;
          font-size: 15px;
          &:hover {
            color: #008ff3;
            cursor: pointer;
          }
        }
        .main-text {
          color: #7c8295;
          font-size: 13px;
          margin: 0 14px;
          &:hover {
            color: #008ff3;
            cursor: pointer;
          }
        }
        .main-right {
          display: inline-block;
          color: #b6b7b9;
          font-size: 12px;
          font-weight: 400;
        }
      }
      .theme-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .theme-img {
          img {
            width: 57.5px;
            height: 43.5px;
            border-radius: 5px;
            cursor: pointer;
          }
          .check-background {
            width: 100%;
            height: 21.5px;
            background-color: rgba(0, 148, 241, 0.7);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            transform: translateY(-14px);
            z-index: 100;
            .iconfont {
              display: flex;
              justify-content: center;
              background: transparent;
              color: white;
            }
          }
          .theme-img-check {
            width: 57.5px;
            height: 43.5px;
            border: 2px solid #008ff3;
            border-radius: 5px;
            transform: translateY(12px);
          }
        }
        .theme-text {
          text-align: center;
          font-size: 13px;
          color: #7c8295;
          cursor: pointer;
        }
        .theme-text-check {
          color: #008ff3;
          transform: translateY(-10px);
        }
      }
    }
  }
}
.satellite-road-event {
  position: fixed;
  top: 17px;
  right: 600px;
  height: 45px;
  width: 74px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6d6d6d;
  border-radius: 3px;
  font-size: 12px;
  z-index: 150;
  transform: translateX(70px);
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
  .iconfont {
    font-size: 12px;
    color: #999;
    margin-right: 5px;
  }
  .iconfont,
  .text {
    cursor: pointer;
  }
  .icon-show {
    color: #008ff3;
    font-size: 14px;
  }
}
.show-animation {
  transform: translateX(0);
  opacity: 1;
}
.traffic-event {
  position: fixed;
  top: 80px;
  right: 200px;
  width: 334px;
  height: 70px;
  background-color: #fff;
  border-radius: 3px;
  padding: 15px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
  z-index: 200;
  .traffic-header {
    display: flex;
    align-items: center;
    height: 34px;
    margin-bottom: 15px;
    .change-button {
      display: flex;
      align-items: center;
      border: 1px solid #008ff3;
      border-radius: 3px;

      div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        width: 50px;
        font-size: 14px;
        color: #008ff3;
        cursor: pointer;
      }
      .change-button-active {
        background-color: #008ff3;
        color: white;
      }
    }
    .traffic-tuli {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .traffic-tuli-text {
        color: #6d6d6d;
        margin-right: 5px;
        font-size: 12px;
      }
      .traffic-tuli-1 {
        width: 25px;
        height: 6px;
        background-color: #38af1b;
        margin-right: 5px;
      }
      .traffic-tuli-2 {
        width: 25px;
        height: 6px;
        background-color: #ff9900;
        margin-right: 5px;
      }
      .traffic-tuli-3 {
        width: 25px;
        height: 6px;
        background-color: #ff0000;
        margin-right: 5px;
      }
      .traffic-tuli-4 {
        width: 25px;
        height: 6px;
        background-color: #8e030c;
        margin-right: 5px;
      }
    }
  }
  .traffic-time {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .traffic-time-text {
      color: #6d6d6d;
      font-size: 13px;
      margin-right: 10px;
    }
    .traffic-time-day {
      color: #999;
      font-size: 12px;
      span {
        margin: 0 5px 0 5px;
      }
    }
  }
}
</style>
